<template>
  <div id="app">
    <!-- 头部 -->
    <mt-header :title="$route.meta.title" v-if="$route.meta.head">
      <mt-button slot="left" v-if="$route.meta.back" @click="routerGoBack" icon="back">返回</mt-button>
    </mt-header>
    <!-- 路由 -->
    <div class="main-box" :class="layCls">
      <router-view></router-view>
    </div>
    <!-- 底部导航 -->
    <mt-tabbar class="footer" v-model="selected" v-if="$route.meta.foot">
      <mt-tab-item id="tab1">
        <i class="fa fa-home"></i>
        <div><router-link :to="{path: '/'}">首页</router-link></div>
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <i class="fa fa-th-list"></i>
        <div><router-link :to="{path: '/goodsList'}">商品列表</router-link></div>
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <i class="fa fa-shopping-cart"></i>
        <div><router-link :to="{path: '/goodsCart'}">购物车</router-link></div>
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <i class="fa fa-user"></i>
        <div><router-link :to="{path: '/user'}">我的</router-link></div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      layCls: "aa",
      selected: 'tab1'
    }
  },
  mounted () {
    this.tabNav();
    var axiosReq = axios.create({
      baseURL:"http://app.wodinghua.com/api",
      timeout:3000,
      headers: {'X-Custom-Header':'foobar'}
    });
    //H5+api
    document.addEventListener("plusready", function() {
      // 注册返回按键事件
      plus.key.addEventListener('backbutton', function() {
        // 事件处理
        plus.nativeUI.confirm("您是否退出满园花境？", function(event) {
          if (event.index) {
              plus.runtime.quit();
          }
        }, null, ["取消", "确定"]);
      }, false);
    });
  },
  methods: {
    tabNav () {
      this.brumbList = this.$route.matched;
      this.$route.matched.forEach((item, index) => {
        this.selected = "tab" + item.meta.tab;
        const hd = item.meta.head;
        const ft = item.meta.foot;
        if(hd === false && ft === false) {
          this.layCls = "headFoot"
        } else if(hd === true && ft === false) {
          this.layCls = "foot"
        } else if(hd === false && ft === true) {
          this.layCls = "head"
        } else {
          this.layCls = ""
        }
      })
    },
    routerGoBack () {
      if(this.$route.matched[0].meta.title === "登录") {
        this.$router.push('/')
      } else {
        this.$router.back()
      }
    }
  },
  watch: {
    $route () {
      this.tabNav();
    }
  }
}
</script>

<style lang="less">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    font-size: 12px;
  }
  .mint-header {
    height: 44px;
    line-height: 44px;
    font-size: 15px;
  }
  img {
    max-width: 100%;
  }
  .mint-button-text {
    font-size: 12px;
  }
  .mint-tabbar .mint-tab-item {
    padding: 5px 0;
    i, a {
      color: #999;
      text-decoration: none;
    }
    i.fa {
      font-size: 16px;
      margin-bottom: 5px;
    }
    &.is-selected {
      a, i {
        color: #26a2ff 
      }
    }
  }
  .oh {
    overflow: hidden;
  }
  .main-box {
    position: fixed;
    top: 44px;
    right: 0;
    bottom: 43px;
    left: 0;
    background-color: #fafafa;
    overflow: auto;
    &.head {
      top: 0
    }
    &.foot {
      bottom: 0;
    }
    &.headFoot {
      top: 0;
      bottom: 0;
    }
  }
  .block {
    background-color: #fff;
    box-shadow: 0 0.08rem 0.15rem rgba(0, 0, 0, 0.1);
  }
  .footer {
    background-color: #fff;
  }
  /*浮动盒子布局*/
  .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*垂直居中*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*水平居中*/
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .flex-center-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*水平居中*/
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .flex-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
</style>